import {Image, ImageBackground, StyleSheet, Text, TouchableOpacity, View} from "react-native";
import empty_icon from "@/assets/images/concern/empty_fan.png";
import activityTag from "@/assets/images/collection/activityTag.png";
import dateTimeIcon from "@/assets/images/collection/dateTime.png";
import addressIcon from "@/assets/images/collection/address.png";
import * as React from "react";
import {scaleSize} from "@/utils/screenSize";
import { useRouter } from "expo-router"
import {format} from "date-fns";
import {LinearGradient} from "expo-linear-gradient";

const ActivityItem = ({ showPrice = true, item }) => {

    const router = useRouter();
    // console.log('item', item);
    const goGroupDetail = function (id) {
        router.push(`/activityDetail/${id}`)
    };

    const computedTime = function (startT, endT) {

        if (!startT || !endT) return ""

        const year1 = format(startT, "yyyy");
        const year2 = format(endT, "yyyy");
        const day1 = format(startT, "MMdd");
        const day2 = format(endT, "MMdd");

        if (day1 === day2) {
            if (year1 !== year2) {
                return `${format(startT, "yyyy.MM.dd")} ${format(startT, "mm:ss")}-${format(endT, "mm:ss")}`;
            }
            return `${format(startT, "MM.dd")} ${format(startT, "mm:ss")}-${format(endT, "mm:ss")}`;
        }

        if (year1 !== year2) {
            return `${format(startT, "yyyy.MM.dd")} ${format(startT, "mm:ss")}-${format(endT, "yyyy.MM.dd")} ${format(endT, "mm:ss")}`;
        }

        return `${format(startT, "MM.dd")} ${format(startT, "mm:ss")}-${format(endT, "MM.dd")} ${format(endT, "mm:ss")}`;
    };

    return (
        <TouchableOpacity onPress={() => goGroupDetail(item?.activityId)}>
            <View style={styles.activityContainer}>
                <View style={styles.activitybody}>
                    <View style={styles.activityBanner}>
                        <Image source={{ uri: item?.coverUrl }} style={{ width: "100%", height: "100%" }} />
                        <ImageBackground source={activityTag} style={styles.activityTagWarp}>
                            <Text style={styles.tagText}>{ item?.typeName }</Text>
                        </ImageBackground>

                    </View>
                    <View style={styles.activityContent}>
                        <View style={styles.activityTitleWarp}>
                            <Text
                                style={styles.activityTitle}
                                numberOfLines={1}
                                ellipsizeMode="tail"
                            >{ item?.title }</Text>
                        </View>
                        <View style={{ flexDirection: "row", }}>
                            {
                                item?.tags?.map((tagItem: any, index: number) => {
                                    return (
                                        <View style={styles.activityTag}>
                                            <Text style={styles.activityTagText} index={index}>{tagItem}</Text>
                                        </View>
                                    )
                                })
                            }
                        </View>

                        <View style={styles.activityDateWarp}>
                            <View style={styles.addressIcon}>
                                <Image source={dateTimeIcon} style={{ width: '100%', height: "100%" }} />
                            </View>
                            <Text style={ styles.activityDate }>
                                {computedTime(item?.durationStartTime, item?.durationEndTime)}
                            </Text>
                        </View>
                        <View style={styles.activityAdressWarp}>
                            <View style={styles.addressIcon}>
                                <Image source={addressIcon} style={{ width: '100%', height: "100%" }} />
                            </View>
                            <Text style={styles.activityAdress}>{ item?.destName }</Text>
                        </View>
                    </View>
                </View>
                <View style={styles.activityFooter}>
                    {
                        item?.hasTicketsForSale == 1 && (
                            <View style={styles.joinList}>
                                <View style={styles.joinListWarp}>
                                    {
                                        item?.members?.map((it:any, index: number) => {
                                            if (index == 0) {
                                                return (
                                                    <View style={styles.joinAvator}>
                                                        <Image source={{ uri: it.avator }} style={{ width: "100%", height: "100%" }} />
                                                    </View>
                                                )
                                            } else if (index <= 3 ) {
                                                return (
                                                    <View style={[styles.joinAvator,styles.maLeft]}>
                                                        <Image source={{ uri:it.avator }} style={{ width: "100%", height: "100%" }} />
                                                    </View>
                                                )
                                            }
                                        })
                                    }
                                    {/*<View style={styles.joinAvator}>*/}

                                    {/*</View>*/}
                                    {/*<View style={[styles.joinAvator,styles.maLeft]}>*/}
                                    {/*</View>*/}
                                    {/*<View style={[styles.joinAvator,styles.maLeft]}>*/}
                                    {/*</View>*/}
                                    {/*<View style={[styles.joinAvator,styles.maLeft]}>*/}
                                    {/*</View>*/}
                                </View>
                                <View style={styles.joinContent}>
                                    <Text style={styles.joinContentText}>正在招募...</Text>
                                </View>
                            </View>
                        )
                    }

                    {
                        showPrice && (
                            <View style={styles.activityMoney}>
                                <Text style={styles.activityMoneyText}>¥30</Text>
                            </View>
                        )
                    }
                </View>
            </View>
        </TouchableOpacity>
    )
};

export default ActivityItem;


const styles = StyleSheet.create({
    activityContainer: {
        // flexDirection: "row",
        marginLeft: 12,
        marginRight: 12,
        // height: scaleSize(164),
        backgroundColor: "#fff",
        borderRadius: 8,
        marginBottom: 12,
    },
    activitybody: {
        // padding: 12,
        flexDirection: "row",

    },
    activityBanner: {
        position: "relative",
        width: scaleSize(80),
        height: scaleSize(80),
        backgroundColor: "blue",
        borderRadius: 4,
    },
    activityContent: {
        marginLeft: 10,
    },
    activityTitleWarp: {
        width: scaleSize(220),
    },
    activityTitle: {
        fontSize: 16,
        fontWeight: "bold",
        color: "#2A2B30",
        letterSpacing: 1.2,
        lineHeight: 22,
    },
    addressIcon: {
        width: scaleSize(11),
        height: scaleSize(11),
    },
    activityTag: {
        width: scaleSize(28),
        height: scaleSize(12),
        backgroundColor: "rgba(255,70,0,0.1)",
        borderRadius: 10,
        marginTop: 6,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        marginRight: 10,
    },
    activityTagText: {
        fontSize: 8,
        color: "#EC6138",
        textAlign: "center",
        lineHeight: 12,
    },
    activityDateWarp: {
        flexDirection: "row",
        alignItems: "center",
        marginTop: 6,
        marginBottom: 6,
    },
    activityDate: {
        marginLeft: 3,
        fontSize: 12,
        color: "#676978"
    },
    activityAdressWarp: {
        flexDirection: "row",
        alignItems: "center",
    },
    activityAdress: {
        fontSize: 12,
        color: "#676978",
        marginLeft: 3,
    },
    joinList: {
        flexDirection: "row",
        alignItems: "center",
    },
    activityFooter: {
        flexDirection: "row",
        // paddingLeft: 12,
        paddingRight: 12,
        marginTop: 8,
        justifyContent: "space-between",
        alignItems: "center"
    },
    joinAvator: {
        width: scaleSize(20),
        height: scaleSize(20),
        backgroundColor: "red",
        borderRadius: 10,
        borderColor: "#fff",
        borderWidth: 1,
    },
    maLeft: {
        marginLeft: -7,
    },
    joinListWarp: {
        flexDirection: "row",
    },
    joinContent: {
        marginLeft: 10,
    },
    joinContentText: {
        color: "#333",
        fontSize: 12,
        fontWeight: "bold"
    },
    activityMoney: {
        width: 56,
        height: 24,
        backgroundColor: "#EC6138",
        borderRadius: 12,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center"
    },
    activityMoneyText: {
        color: "#fff",
        fontSize: 18,
    },
    activityTagWarp: {
        position: "absolute",
        width: 30,
        height: 20,
        // backgroundColor: "red",
    },
    tagText: {
        fontSize: 10,
        textAlign: "center",
        color: "#fff",
        marginTop: 1,
    },
});
